import {Component, EventEmitter, Input, Output} from '@angular/core';
import {GPayChooseComponent} from "../g-pay-choose/g-pay-choose";
import {UserProvider} from "../../providers/user/user";
import {Config, Platform, PopoverController} from "ionic-angular";
import {GPopoverPopIn, GPopoverPopOut} from "../../common/Helper";

@Component({
  selector: 'g-pay-bank',
  templateUrl: 'g-pay-bank.html'
})
export class GPayBankComponent {

  private _card: any = {}
  @Output() cardChange = new EventEmitter();

  @Input()
  get card() {
    return this._card;
  }

  set card(val) {
    this._card = val;
    this.cardChange.emit(this._card);
  }

  top: number

  constructor(public userProvider: UserProvider,
              public popover: PopoverController,
              public platform: Platform,
              public config: Config,) {
    this.top = this.platform.height() - 270
    this.config.setTransition('g-popover-pop-in', GPopoverPopIn);
    this.config.setTransition('g-popover-pop-out', GPopoverPopOut);
  }

  choosePayWay() {
    this.userProvider.getBankList({
      success: (d) => {
        this.presentPopover({
          bankList: d.list
        })
      }
    })
  }

  presentPopover(option) {
    let popover = this.popover.create(GPayChooseComponent, {
      bankList: option.bankList,
      success: (data) => {
        this.card = data
      },
      defaultValue: this._card
    }, {
      cssClass: 'g-popover-bottom'
    });
    let ev = {
      target: {
        getBoundingClientRect: () => {
          return {
            top: this.top,
            left: 0
          };
        }
      }
    };
    popover.present({
      ev: ev
    });
  }

}
